<template>
  <div>
    <h4>欢迎光临_vue开发的收银系统_水果店</h4>
    <table>
      <th>
        {{ money }}
      </th>

      <tr>
        {{
          sun
        }}
        <input type="text" v-model="value" />
      </tr>
      <tr>
        <button @click="addMon">{{ smm }}</button>
      </tr>
      <tr>
        结账单：总价：{{
          sum
        }}
        ￥元 折后：{{
          summ
        }}
        ￥元 省了：{{
          summm
        }}
        ￥元
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      money: "苹果 10 ￥ / 斤，折扣<8折>",
      sun: "请输入你要购买的斤数",
      smm: "结账买单~",
      sum: "0",
      summ: "0",
      summm: "0",
    };
  },

  mounted() {},

  methods: {
    addMon() {
      (this.sum = this.value * 10),
        (this.summ = this.sum * 0.8),
        (this.summm = this.sum * 0.2);
    },
  },
};
</script>

<style lang="less" scoped>
div {
  width: 650px;
  height: 200px;
  background-color: #f0f;
  margin: 20px auto;
  h4 {
    text-align: center;
  }
  table {
    width: 600px;
    height: 120px;
    border: 1px solid #000;
    background-color: #00f;
    margin: auto;
    text-align: center;
    th {
      width: 100%;
      height: 25%;
      background-color: #0ff;
      border: 1px solid #000;
    }
    tr {
      width: 100%;
      height: 25%;
      background-color: #fff;
      border: 1px solid #000;
    }
  }
}
</style>